<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:f="http://java.sun.com/jsf/core">
    
    <p:dialog header="Movie Info" widgetVar="movieDialog" width="660" height="480" modal="true" resizable="false">
                <p:outputPanel id="movieDetail" layout="block">
                    <h:panelGrid columns="2" >
                        <p:graphicImage value="#{MoviePopUpBean.selectedMovie.movieCover}" id="PopUpImage"/>
                        <p:panel id="PopUpPanel" >
                            <h:panelGrid columns="2" cellpadding="5">
                                <h:outputText value="#{MoviePopUpBean.selectedMovie.title}"/>
                                <h:outputText value="(#{MoviePopUpBean.selectedMovie.prodYear})"/>
                            </h:panelGrid>
                            <p:spacer width="10" height="1"/>
                            <h:outputText value="#{MoviePopUpBean.selectedMovie.genreAsString}"/>
                            <p:separator/>
                            <h:panelGrid columns="2" cellpadding="5">
                                <h:outputText value="Director: "/>
                                <h:outputText value="#{MoviePopUpBean.selectedMovie.director}"/>
                                <h:outputText value="Actors"/>
                                <p:dataList var="actor" value="#{MoviePopUpBean.selectedMovie.actors}" itemType="disc" styleClass="dataList">
                                    #{actor.firstName}, #{actor.lastName}
                                </p:dataList>
                            </h:panelGrid>
                            <p:separator/>
                            <h:panelGrid columns="3" cellpadding="5">
                                <h:outputText value="Rating:"/>
                                <p:rating stars="10" rateListener="#{MoviePopUpBean.handleRate}" update="rating"/>
                                <h:outputText id="rating" value="#{MoviePopUpBean.selectedMovie.rating}"/>
                            </h:panelGrid>
                            <p:separator/>
                            <h:panelGrid columns="4">
                                <h:outputText value="Price: "/>
                                <h:outputText value="#{MoviePopUpBean.selectedMovie.price}:-"/>
                                <p:spacer width="50"/>
                                <h:commandButton image="resources/img/add-to-cart-button.jpg" id="buyButton" actionListener="#{MoviePopUpBean.addProduct}" />
                            </h:panelGrid>
                            
                        </p:panel>
                    </h:panelGrid>
                    <p:separator/>
                    <h:outputText value="Description:"/><br/>
                    <h:outputText value="#{MoviePopUpBean.selectedMovie.description}"/>
                </p:outputPanel>
            </p:dialog>
    
    
</ui:composition>